<template>
    <div class="container">
        <!-- 底部活动 -->
        <div class="sung11" v-if="huodong">
<!--            <router-link to="/77" ><span>浪漫七夕，充19元送19元</span></router-link>-->
            <router-link to="/tehui" ><span>超值特惠，充19元送19元</span></router-link>
<!--            <router-link to="/77" ><span class="lingqu">领取红包</span></router-link>-->
            <router-link to="/tehui" ><span class="lingqu">领取红包</span></router-link>
            <b @click="guanbi">X</b>
        </div>
        <div class="gif" v-if="gif">
            <div>
                <div class="gif-img">
<!--                    <img src="../assets/img/70px.gif" />-->
                    <img src="../assets/img/Flickr-1.4s-200px.svg" />
                </div>
                <p>加载中...</p>
            </div>
        </div>
        <div class="jiazai" v-if="jiazai">
            <div class="jiazai-content">
<!--                <img src="../assets/img/70px.gif" />-->
                <img src="../assets/img/Flickr-1.4s-200px.svg" />
                <div>加载中...</div>
            </div>
        </div>
<!--        自定义投诉-->
<!--        <div class="complain">-->
<!--            <router-link to="/tousu">-->
<!--                <i class="iconfont icon-jinggao"></i><span>投诉</span>-->
<!--            </router-link>-->
<!--        </div>-->
        <div class="content">
            <!--头部菜单栏-->
            <div class="top" v-show="alter===0">
                <div class="left">
                    <a @click="routerback"><img src="../assets/img/20180820130432.png"><span></span></a>
                </div>
                <div class="right">
                    <router-link :to="{path:'/book_details',query:{ id:id }}"><img src="../assets/img/20180820130414.png"></router-link>
                </div>
            </div>
            <div class="center" @click="menu" :style="styleObject" ref="center">
                <!--小说图片，名称，作者-->
                <div class="shutou">
                    <img :src="books.ImageUrl ? books.ImageUrl :''" />
                    <h3>{{books.Title}}</h3>
                    <p>{{books.Author}} 著</p>
                </div>
                <!--小说章节内容-->
                <div class="shu"  :style="{fontSize:size+'px'}" v-for="(all_contents,index) in all_content" :key="index">
                    <div class="shu_head">{{all_contents.title}}</div>
                    <div class="shu_content">
                        <p v-for="(contents,index) in all_contents.content" :key="index">{{contents}}</p>
                    </div>
                    <div class="tuijian">
                        <h4>精彩推荐</h4>
                        <div class="tui">
                            <div v-for="recommends in recommend" @click="shuaxin"  :key="recommends.ID">
                                <router-link :to="{path:'/read',query:{id:recommends.ID,chapter_Index:1}}" >
                                    <img :src="recommends.ImageUrl">
                                </router-link>
                                <p>{{recommends.Title}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--底部菜单栏-->
            <div class="bottom" v-if="alter===0">
                <router-link :to="{path:'/catalog',query:{id:id,vip_chapter:books.VipChapterIndex}}" tag="div" class="mulu">
                    <img src="../assets/img/20180820131628.png">
                    <p>目录</p>
                </router-link>
                <div class="zihao" @click="font_size">
                    <img src="../assets/img/20180820131639.png">
                    <p>字号</p>
                </div>
                <div class="beijing" @click="bagd">
                    <img src="../assets/img/20180820131656.png">
                    <p>背景</p>
                </div>
                <div class="shujia">
                    <router-link to="/bookrack" >
                        <img src="../assets/img/20180820131722.png">
                        <p>书架</p>
                    </router-link>
                </div>
            </div>
<!--            改变字体大小-->
            <div class="gaizihao" v-else-if="alter===1">
                <div class="jian" @click="size_reduction">字号 -</div>
                <div class="daxiao">{{size}}</div>
                <div class="jia" @click="size_plus">字号 +</div>
            </div>
<!--            改变背景-->
            <div class="gaibeijing" v-else-if="alter===2">
                <div class="bai" @click="beijing('rgb(237, 237, 237)','black')"></div>
                <div class="fen" @click="beijing('rgb(229, 206, 203)','black')"></div>
                <div class="zong" @click="beijing('rgb(239, 219, 188)','black')"></div>
                <div class="lv" @click="beijing('rgb(208, 229, 203)','black')"></div>
                <div class="hei" @click="beijing('rgb(0, 0, 0)','gray')"></div>
            </div>
        </div>
<!--        显示签到(并没有使用)-->
        <div class="bag">
            <div class="bag-2">
                <div class="qian">
                    <div class="qian_2">今日成功领取<span class="get">21</span>书币</div>
                    <div class="qian_3">签到领币成功</div>
                    <div>"请明天继续再接再厉呀"</div>
                    <div class="zhen">签到完成，朕要继续看书了</div>
                    <div>#本周新书#</div>
                    <div class="tui"></div>
                </div>
            </div>
        </div>
        <div class="guanzu" v-if="guanzu">
            <div class="guanzu-2">
                <div class="guanzu-tishi">
                    <div><span>温馨提示</span></div>
                    <div>长按识别作者授权<span>公众号</span>继续阅读</div>
                    <div>由于版权问题，<br>请扫下方二维码继续阅读</div>
                    <div class="tishi-img">
                        <img v-if="qrcode_img" :src="$axios.defaults.baseURL + '/image-proxy?url=' + qrcode_img"/>
                    </div>
                    <div>长按识别上方二维码</div>
                    <div @click="guanzhu">确定</div>
                </div>
            </div>
        </div>
<!--        另一种二维码展现-->
        <!--<div class="guanzu2">
            <div class="guanzu2-2">
                <div class="guanzu-tishi2">
                    <img src="img/1.jpg" />
                    <div class="erwei">
                        <div class="charu">
                            <div class="tishi-img2"></div>
                            <div class="zi">
                                <p>长按二维码</p>
                                <p>继续阅读精彩内容</p>
                            </div>
                        </div>
                        <div class="x">X</div>
                    </div>
                </div>
            </div>
        </div>-->
    </div>
</template>

<script>
    // huodong_version 用于记录活动的版本号，直接更改活动版本号，所有用户可立即看到活动弹出框
    const huodong_version = "0.3";

    // huodong_ctime 用于记录用户关闭活动框之后，多长时间之内不会再弹活动框
    const huodong_ctime = 1000 * 3600 * 8; // 8 小时时间(毫秒)

    // 设置活动窗口被用户关闭的时间
    let set_huodong_close_time = function () {
        let now = (new Date()).getTime();
        localStorage.setItem("huodong" + huodong_version, now+"");
    };

    // 检测活动框是否应该被打开
    let check_huodong_is_ok = function () {
        // return false;
        let time = localStorage.getItem("huodong" + huodong_version);
        if(time) {
            time -= 0;
            return !(time && time + huodong_ctime > (new Date().getTime()));
        } else {
            return true
        }
    };

    export default {
        inject: ['reload'],
        name: "read",
        data(){
            return{
                id: this.$route.query.id,
                chapter_Index: this.$route.query.chapter_Index,
                huodong: check_huodong_is_ok(), //活动显示隐藏
                sign_in: this.$route.query.sign_in, //签到
                sign_in_bi: '',
                books: [], //图书信息
                recommend: [], //推荐图书
                chapter:[], //章节信息
                content: [], //章节内容
                all_content:[], //所有内容
                alter: 3, //菜单栏显示隐藏
                guanzu: false,
                gif: true, //加载
                jiazai : false ,
                styleObject:{
                    background:'',
                    color:''
                }, //背景
                size:20, //字体
                index: 0,
                tiqian: false, //提前加载内容
                code: true,
                sex: 1,
                qrcode_img: '', //公众号二维码
            }
        },
        created:function (){
            this.set()
            //id=0 跳转最近一次阅读
            if(this.id == 0){
                this.last_book()
            }else{
                this.BookInfo()
                this.chapters()
            }
            let item=localStorage.getItem('sex')
            if(item != null ){
                this.sex = item
            }else{
                this.sex = 1
            }
            this.tuijian()
        },
        mounted(){
            // //滚动加载下一章
            // window.addEventListener('scroll', this.scroll)
            //读取本地储存的背景颜色
            let background=localStorage.getItem('background-color');
            this.styleObject.background=background
            if(background=='rgb(0, 0, 0)'){
                this.styleObject.color="gray";
            }
            let size=localStorage.getItem('size');
            if(size == null){
                this.size=20
            }else{
                this.size=size
            }
        },
        methods:{
            shuaxin(){
                this.reload()
            },
            scroll(){
                //变量scrollTop是滚动条滚动时，距离顶部的距离
                let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                //变量windowHeight是可视区的高度
                let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                //变量scrollHeight是滚动条的总高度
                let scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
                let scrollHeight2 = Math.ceil(scrollHeight*0.9+this.index*100);
                //滚动条到底部的条件
                if(scrollTop+windowHeight > scrollHeight2){
                // if(scrollTop+windowHeight == scrollHeight){
                    if(this.tiqian){
                        this.index = this.index
                    }else{
                        this.tiqian = true;
                        // this.jiazai = true;
                        this.index++;
                        this.code = false;
                        this.chapters(this.index)
                        // this.chapters(this.index)
                    }
                    // console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
                }
                if(scrollTop+windowHeight == scrollHeight){
                    if(this.code){
                        this.jiazai = true;
                        this.chapters(this.index)
                    }
                    this.jiazai = true;
                }
            },
            //最近阅读
            last_book:function(){
                this.$axios.get('/latest-history').then(response=>{
                    if(response.data.history) {
                        this.id = response.data.history.BookID;
                        this.chapter_Index = response.data.history.ChapterIndex;
                        this.BookInfo();
                        this.chapters()
                    }
                })
            },
            set:function(){
                this.$emit('set','hide')
            },
            //底部活动隐藏
            guanbi:function (){
                // 设置活动关闭时间
                set_huodong_close_time();
                this.huodong=false
            },
            //显示隐藏菜单栏
            menu:function(){
                if (this.alter !== 3) {
                    this.alter = 3
                } else {
                    this.alter = 0
                }
            },
            font_size:function(){
                this.alter=1
            },
            bagd:function(){
                this.alter=2
            },
            //改变背景颜色
            beijing:function(rgb,color){
                this.styleObject.background=rgb
                this.styleObject.color=color
                setTimeout(()=>{
                    let back=this.$refs.center.style.background
                    if (typeof(Storage) !== "undefined") {
                        localStorage.setItem('background-color',back);
                    }
                })
            },
            //字号减
            size_reduction:function(){
                this.size--
                if(this.size<=12){
                    this.size=12
                }
                if (typeof(Storage) !== "undefined") {
                    localStorage.setItem('size',this.size);
                }
            },
            //字号加
            size_plus:function(){
                this.size++
                if(this.size>=30){
                    this.size=30
                }
                if (typeof(Storage) !== "undefined") {
                    localStorage.setItem('size',this.size);
                }
            },
            //隐藏关注提示
            guanzhu:function(){
              this.guanzu=false
            },
            //返回路由
            routerback: function (){
                this.$router.back(-1)
            },
            //获取签到信息
            // signIn:function (){
            //     let self=this
            //     let url= "/sign-in"
            //     this.$axios.get(url).then(response=>{
            //         console.log(response)
            //         self.sign_in_bi=response
            //     })
            // },
            //获得公众号二维码
            qrcode:function(){
                let url = "/app-qrcode";
                this.$axios.get(url).then(response => {
                    if(response.data.url) {
                        this.qrcode_img = response.data.url
                    }
                })
            },
            //书籍信息，章节标题
            BookInfo:function(){
                this.$axios.get( "/book-infos", {params:{BookIDs:[this.id]}}).then(response=>{
                    this.books=response.data.books[0];
                    document.title = response.data.books[0].Title;
                })
            },
            chapters:function(){
                let chapter_Index=parseInt(this.chapter_Index)+parseInt(this.index);
                this.$axios.get( "/chapter", {params:{BookID:this.id,Index:chapter_Index}}).then(response=>{
                    if(response){
                        if(response.data.chapter){
                            this.chapter=response.data.chapter;
                            this.next_chapters(response.data["content-url"])
                        }else if(response.data.err_code==3000){
                            if(this.code){
                                this.qrcode(this.id, chapter_Index);
                                this.guanzu=true
                                this.jiazai = false
                                this.tiqian = false;
                            }
                            this.code = true;
                        }else if(response.data.err_code==3001){
                            if(this.code){
                                this.$router.push({path:'/chongzhi',query:{coins:'不足', successUrl: location.href}});
                                this.jiazai = false
                                this.tiqian = false;
                            }
                            this.code = true;
                        }
                    }else{
                        if(this.code) {
                            this.$router.push({path: '/end', query: {id: this.id}});
                            this.tiqian = false;
                        }
                        this.code = true;
                    }
                })
            },
            //推荐图书
            tuijian:function(){
                this.$axios.get('/books',{params: {PtID:0,ForbidView:2,Finished:0,Sex:this.sex,Limit:3,Offset:0,Order:'YearRec',Descending:true}}).then(response=>{
                    this.recommend=response.data.books
                })
            },
            //章节内容
            next_chapters:function(content_url){
                this.$axios.get(content_url, {params: {unset: true}}).then(response=>{
                    let contents = response.data.split("\n");
                    history.replaceState(null, this.chapter.Title, "read?id="+this.chapter.BookID+"&chapter_Index="+this.chapter.Index)
                    this.all_content.push({
                        title: this.chapter.Title,
                        content: contents
                    });
                    this.gif = false;
                    this.jiazai = false;
                    this.tiqian = false;
                    window._hmt.push(['_trackPageview', "/read/" + this.chapter.BookID + "/" + this.chapter.Index]);
                    //滚动加载下一章
                    window.addEventListener('scroll', this.scroll)
                })
            },
        },
        destroyed () {
            window.removeEventListener('scroll', this.scroll)
        }
    }
</script>

<style scoped>
    .container {
        background: #e9dcbf;
        padding: 0px;
        position: relative;
        margin-bottom: 0px;
    }
    .bag {
        height: 100vh;
        position: fixed;
        width: 100%;
        z-index: 999;
        display: none;
        top: 0px;
    }
    .jiazai{
        position: fixed;
        top: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        /*background: rgba(255,255,255,0.5);*/
        width: 100%;
        height: 100%;
        z-index: 500;
    }
    .jiazai-content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        /*背景透明*/
        background: rgba(255, 255, 255, 0);
        /*隐藏文字*/
        color: rgba(0, 0, 0, 0);
        width: 100px;
        height: 100px;
        font-size: 14px;
        border-radius: 5px;
    }
    .jiazai img{
        width: 80px;
        height: 80px;
        margin-bottom: 10px;
    }
    .bag-2 {
        height: 100vh;
        display: flex;
        align-items: center;
    }

    .qian {
        text-align: center;
        width: 25rem;
        margin: auto;
        background: black;
        border-radius: 10px;
        padding-top: 10px;
        color: white;
        letter-spacing: 2px;
    }

    .zhen {
        width: 20rem;
        margin: 15px auto;
        background: #FF4772;
        border-radius: 5px;
        padding: 5px 0px;
    }

    .qian>div:nth-child(1) {
        width: 20rem;
        margin: 10px auto;
        border-bottom: 1px dashed white;
        padding-bottom: 10px;
    }

    .get {
        color: #FF4772;
    }

    .qian>div:nth-child(2) {
        margin-top: 10px;
        font-weight: bold;
        font-size: 1.7rem;
    }

    .qian>div:nth-child(3) {
        margin-top: 20px;
    }

    .qian>div:nth-child(5) {
        margin-top: 20px;
    }

    .qian>div:nth-child(6) {
        margin: 20px 10px 5px;
    }
    .guanzu2 {
        background: rgba(0, 0, 0, 0.2);
        height: 100vh;
        display: flex;
        align-items: center;
        position: fixed;
        width: 100%;
        z-index: 999;
        top: 0px;
        display: none;
    }
    .guanzu2-2 {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .guanzu2-2 img{
        width: 100%;
    }
    .guanzu-tishi2 {
        position: relative;
        text-align: center;
        width: 22rem;
        height: 30rem;
    }
    .guanzu-tishi2>img{
        border-radius:10px ;
        height: 100%;
    }
    .tishi-img2{
        width: 10rem;
        height: 10rem;
        margin-bottom: 10px;
    }
    .tishi-img2 img{
        width: 100%;
        height: 100%;
    }
    .charu{
        text-align: left;
        position: absolute;
        font-size: 24px;
        font-weight: bold;
        color: red;
        bottom: 10px;
        left: 30px;
        z-index: 999;
    }
    .zi{
        color: white;
        -webkit-text-stroke: 0.8px red;
        letter-spacing: 0.02em;
    }
    .erwei{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        z-index: 777;
    }
    .x{
        position: absolute;
        right: -5px;
        top: -5px;
        width: 22px;
        height: 22px;
        background: gray;
        border: 2px solid white;
        color: white;
        border-radius:50% ;
    }
    .guanzu {
        background: rgba(0, 0, 0, 0.2);
        height: 100vh;
        display: flex;
        align-items: center;
        position: fixed;
        width: 100%;
        z-index: 999;
        top: 0px;
    }
    .guanzu-2 {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
    }
    .guanzu-tishi {
        text-align: center;
        width: 21rem;
        margin: 100px auto;
        background: white;
        border-radius: 10px;
        padding-top: 10px;
    }

    .guanzu-tishi img {
        width: 100%;
    }

    .tishi-img {
        width: 16rem;
        margin: 10px auto 0px;
    }

    .guanzu-tishi span {
        color: #d0021b;
    }

    .guanzu-tishi div:nth-child(1) {
        font-size: 1.5rem;
    }

    .guanzu-tishi div:nth-child(2) {
        margin-top: 10px;
    }

    .guanzu-tishi div:nth-child(3) {
        margin-top: 10px;
        color: #d0021b;
    }

    .guanzu-tishi div:nth-child(4) {
        margin-top: 5px;
    }

    .guanzu-tishi div:nth-child(5) {
        margin-top: -5px;
        padding-bottom: 5px;
        font-weight: bold;
        font-size: 1.5rem;
    }

    .guanzu-tishi div:nth-child(6) {
        margin-top: 10px;
        border-top: 1px solid #DDDDDD;
        color: #3688ff;
        padding: 10px;
        font-size: 1.3rem;
    }

    .guanzu-tishi div:nth-child(6):hover {
        background: gainsboro;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .top {
        position: fixed;
        width: 100%;
        padding: 10px 0px 8px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        background: rgba(0, 0, 0, 0.7);
    }

    .left a {
        margin-left: 8px;
    }

    .right a {
        margin-right: 8px;
    }

    .left a,
    .right a {
        color: white;
        text-decoration: none;
    }

    .top img {
        width: 2.4rem;
    }

    .top span {
        font-size: 1.3rem;
    }

    .center {
        background: #efdbbc;
        /*background: #ededed;*/
    }

    .shutou {
        text-align: center;
        padding-top: 70px;
    }

    .shutou img {
        width: 10rem;
        border-radius: 5px;
        -webkit-box-shadow: 0 4px 10px rgba(0,0,0,.2);
        box-shadow: 0 4px 10px rgba(0,0,0,.2);
    }

    .shutou h3 {
        font-weight: bold;
        width: 13rem;
        margin: 15px auto 10px;
        font-size: 0.9rem;
    }

    .shutou p {
        font-size: 0.8rem;
        opacity: 0.5;
        margin: 5px;
    }

    .shu {
        padding: 10px 15px;
        font-size: 1.1rem;
    }

    .shu_head {
        font-weight: bold;
        margin-bottom: 20px;
    }
    /*.shu_content{*/
        /*height: 1000px;*/
    /*}*/
    .shu_content p {
        text-indent: 2em;
        margin-bottom: 15px;
        line-height: 200%;
    }

    .jia,
    .jian {
        width: 6rem;
        border: 1px solid white;
        text-align: center;
        padding: 2px 5px;
    }

    .vip_top {
        position: relative;
        text-align: center;
        font-size: 1rem;
    }

    .vip_top:before {
        content: '';
        position: absolute;
        top: 50%;
        background: #ff4772;
        width: 26%;
        height: 1px;
        left: 0;
    }

    .vip_top:after {
        content: '';
        position: absolute;
        top: 50%;
        background: #ff4772;
        width: 26%;
        height: 1px;
        right: 0;
    }

    .price {
        margin-top: 15px;
        padding-left: 40px;
    }

    .balance {
        margin-top: 10px;
        padding-left: 40px;
        color: #ff4772;
    }

    .chongzhi {
        margin-top: 20px;
        text-align: center;
        color: #fff;
        background-color: #ff4772;
        font-size: 1.2rem;
        width: 100%;
        padding: 0.6rem;
        border-radius: 5px;
    }

    .nianhui {
        text-align: center;
        color: #ff4772;
        margin: .57rem 0 0 0;
        padding-bottom: 8rem;
        font-size: 1.2rem;
    }

    .tuijian {
        margin: 20px 0px;
    }

    .tuijian h4 {
        margin: 20px 0px;
        text-align: center;
        font-size: 1.2rem;
    }

    .tuijian p {
        text-align: center;
        width: 6.5rem;
    }

    .tui {
        display: flex;
        justify-content: space-between;
        padding: 0px 10px;
        font-size: 1rem;
    }

    .tui img {
        width: 5.5rem;
        height: 7.5rem;
        border-radius: 5px;
    }

    .tui p {
        width: 5rem;
        margin-top: 10px;
        font-size: 1rem;
    }

    .bottom {
        position: fixed;
        width: 100%;
        bottom: 0px;
        padding-top: 10px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        font-size: 0.8rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .bottom img {
        width: 2rem;
    }

    .bottom p {
        text-align: center;
        margin-top: 0px;
    }

    .bottom a {
        text-decoration: none;
        color: white;
    }

    .gaibeijing {
        position: fixed;
        width: 100%;
        bottom: 0px;
        padding-top: 10px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        display: flex;
        justify-content: space-around;
    }

    .gaibeijing div {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        margin: 10px 0px 20px;
    }

    .bai {
        background: white;
    }

    .fen {
        background: #f695ab;
    }

    .zong {
        background: #efdbbc;
    }

    .lv {
        background: #4fb884;
    }

    .hei {
        background: black;
    }

    .gaizihao {
        position: fixed;
        width: 100%;
        bottom: 0px;
        padding-top: 10px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 0.9rem;
    }
    .gaizihao div {
        margin: 10px 0px 20px;
    }
    .gif{
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0px;
        left: 0px;
        background: white;
        z-index: 400;
    }
    .gif>div{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 100vh;
    }
    .gif p{
        width: 90px;
        padding-bottom: 5px;
        font-weight: 500;
        text-align: center;
        background: rgba(255,255,255,0.7);
        margin: 0px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    .gif img{
        width: 80px;
        height: 80px;
    }
    .gif-img{
        width: 90px;
        height: 70px;
        line-height: 70px;
        background: rgba(255,255,255,0.7);
        text-align: center;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    .complain{
        position: fixed;
        right: 10px;
        top: 0px;
    }
    .complain a{
        text-decoration: none;
        display: flex;
    }
    .complain a span{
        padding-left: 5px;
        font-size: 1rem;
        color: #3688FF;
        display: block;
        margin-top: 3px;
    }
    .iconfont{
        color: gray;
        opacity: 0.6;
        margin-top: 4px;
    }
    .sung11{
        position: fixed;
        z-index: 9990;
        width: 100%;
        bottom: 0px;
        text-align: center;
        background: #d96b54;
        padding: 10px 0px;
        display: flex;
        color: white;
        justify-content: center;
        align-items: center;
        opacity: 0.6;
    }
    .sung11 a{
        text-decoration: none;
        font-size: 15px;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 5px;
    }
    .lingqu{
        font-weight: bold;
        font-size: 1.2rem;
        background: #dbbb86;
        border-radius: 2px;
        color: black;
        padding: 5px;
        margin: 0px 5px;
    }
    .sung11 b{
        font-size: 14px;
    }
</style>
